<template>
  <div class="pyqBox">
    <h3 style="margin-bottom: 10px;">微信朋友圈文案</h3>

    <div class="glass-container" v-loading="loading"> 
      <div class="glassBox" ref="imgElement">
        <div class="content">{{pyqText.content}}</div>
        <div class="source">------{{pyqText.source}}</div>
      </div>
      <button class="btn" @click="reqGetPyqText"> 换一句 </button>
      <button class="button-move" @click="handleCopy"><span class="button_top" > 复制 </span></button>
      <button class="button-createdImg" @click="handleCreatedImg"><span class="button_top" > 生成图片 </span></button>
    </div>

  </div>
</template>

<script setup>
import {reactive,ref} from "vue"
import {ElMessage} from 'element-plus'
import {getPyqText} from '@/request/apis/getText.js'
import useClipboard from 'vue-clipboard3'
import html2canvas from 'html2canvas'

let pyqText = ref({
  content: "她偷走了我的心，却是为了她爱的人。——《仙剑奇侠传三》",
  source: "佚名"
})
const loading = ref(false)

// 请求朋友圈文案的句子
async function reqGetPyqText(){
  loading.value = true
  const {data:res} = await getPyqText("26bfeab1c0f169c2f61e66c0f4ec0dd8")
  
  if(!res) return
  if(res.code !== 200) return ElMessage.warning(res.msg)
  pyqText.value = res.result
  
  loading.value = false
}

const { toClipboard } = useClipboard()

// 执行复制函数
async function Copy(content){
  try{
    await toClipboard(content)
    ElMessage.success('复制成功')
  }catch(e){
    ElMessage.error('复制失败')
  }
}

// 点击复制按钮
function handleCopy(){
  Copy(pyqText.value.content)
}

// 点击生成图片
const imgElement = ref(null)
function handleCreatedImg(){
  console.log('imgElement', imgElement.value)
  // 调用html2canvas
  html2canvas(imgElement.value).then(canvas => {
    // 生成base64格式
    const imgData = canvas.toDataURL('image/png')
    console.log('imgData', imgData)
    // 创建a标签下载
    const a = document.createElement('a')
    a.href = imgData
    a.download = 'pyqText.png'
    a.click()
  })
}
// 首次执行一次请求 
reqGetPyqText()

</script>

<style lang="less" scoped>
.pyqBox{
  height: 100%;
  padding-top: 50px;
}
.glass-container{
    position: relative;
    width: 700px;
    height: 375px;
    margin: 0 auto;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    background-color: rgba(0,0,0, 0.075);
    box-shadow: rgba(0, 0, 0, 0.8) 2px 8px 8px;
    border: 2px rgba(255,255,255,0.4) solid;
    border-bottom: 2px rgba(40,40,40,0.35) solid;
    border-right: 2px rgba(40,40,40,0.35) solid;

    .content{
      text-align: center;
      font-size: 19px;
      text-shadow: 5px 5px 5px #000;
    }

    .source{
      text-align: right;
      font-size: 16px;
      margin-top: 50px;
      padding-right: 30px;
    }

// 按钮定位
    .button-move{
      position: absolute;
      right: 10px;
      bottom: 20px;
    }
    .button-createdImg{
      position: absolute;
      right: 240px;
      bottom: 20px;
    }

    .btn{
      position: absolute;
      right: 100px;
      bottom: 20px;
    }
}

// 复制按钮样式
.button-move {
  /* Variables */
 --button_radius: 0.75em;
 --button_color: #e8e8e8;
 --button_outline_color: #000000;
 font-size: 14px;
 font-weight: bold;
 border: none;
 border-radius: var(--button_radius);
 background: var(--button_outline_color);
}

.button_top {
 display: block;
 box-sizing: border-box;
 border: 2px solid var(--button_outline_color);
 border-radius: var(--button_radius);
 padding: 0.75em 1.5em;
 background: var(--button_color);
 color: var(--button_outline_color);
 transform: translateY(-0.2em);
 transition: transform 0.1s ease;
}

.button-move:hover .button_top {
  /* Pull the button upwards when hovered */
 transform: translateY(-0.33em);
}

.button-move:active .button_top {
  /* Push the button downwards when pressed */
 transform: translateY(0);
}

// 换一句按钮样式
.btn {
 background-color: #00BFA6;
 padding: 14px 40px;
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 2px;
 cursor: pointer;
 border-radius: 10px;
 border: 2px dashed #00BFA6;
 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 transition: .4s;
}

.btn span:last-child {
 display: none;
}

.btn:hover {
 transition: .4s;
 border: 2px dashed #00BFA6;
 background-color: #fff;
 color: #00BFA6;
}

.btn:active {
 background-color: #87dbd0;
}


</style>
